<script setup lang="ts">
import {onLaunch} from "@dcloudio/uni-app";
import {appGlobal} from "@/stores";

const appGlobalStore = appGlobal();
onLaunch(() => {
  uni.getSystemInfo({
    success: (res) => {
      appGlobalStore.save({
        safeArea: res.safeArea,
        safeAreaInsets: res.safeAreaInsets,
      });
      console.log("设备信息：", res.safeAreaInsets);
      console.log("安全区域：", res.safeArea);
    },
  });
});
</script>
<style lang="scss">
@import "node_modules/@dcloudio/uni-ui/lib/uni-scss";

@font-face {
  font-family: uniicons;
  src: url("node_modules/@dcloudio/uni-ui/lib/uni-icons/uniicons.ttf")
  format("truetype");
}
.uni-page-body {
  height: 100%;
}
// 均匀布局
.zl-jy {
  display: flex;
  justify-content: space-around;
}

/**
 * 一左一右
 */
.zl-sb {
  display: flex;
  justify-content: space-between;
}

/**
 * 水平居中
 */
.zl_r_jz {
  display: flex;
  justify-content: center;
}

//居中布局
.zl-cy {
  display: flex;
  justify-content: center;
}

// 横向从左往右
.zl-czwy {
  display: flex;
  flex-direction: row;
}

// 垂直布局
.zl-cz {
  display: flex;
  flex-flow: column;
}

// 垂直居中
.zl-jz {
  display: flex;
  align-items: center;
}

// flex 1
.zl-h1 {
  height: 100vh;
}

// flex 1
.zl-f1 {
  flex: 1;
}

// flex
.zl-f {
  display: flex;
}

// 文字颜色
.zl-text1 {
  color: $uni-text-color-inverse;
  font-size: 14px;
}

.zl-right {
  float: right;
}

// 文字颜色
.zl-text2 {
  color: $uni-text-color-placeholder;
  font-size: 14px;
}

// 红色的文字颜色
.zl-text-red {
  color: #f61616;
  font-size: 14px;
}

// 文字颜色
.zl-text3 {
  color: #333;
  font-size: 14px;
}

// 文本标题
.zl-title1 {
  font-weight: 600;
  font-size: $uni-font-size-lg;
}

// 图片
.zl-img {
  width: 100%;
  height: 100%;
}

.zl-main-background-color {
  background-color: #1152e1;
}

.zl-main-background-color1 {
  background-color: $uni-text-color-inverse;
}

.zl-main-background-color2 {
  background-color: $uni-bg-color;
}

// 一条线
.zl-line {
  height: 1px;
  background-color: #e5e5e5;
}

// 超出省略号
.zl-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 超出省略号
.zl-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// 可以点击的link样式
.zl-link {
  color: #1152e1;
  text-decoration: underline;
}

.z-qwd-button {
  background-color: #1152e1;
  border-radius: 10px;
  padding: 2px 0;
  text-align: center;
  font-size: 16px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
}

.z-qwd-button2 {
  background-color: #00b26a;
} /**
 * 均匀布局
 */
.zlWL_zl_jy {
  display: flex;
  justify-content: space-around;
}
/**
 * 横向从左往右
 */
.zlWL_zl_czwy {
  display: flex;
  flex-direction: row;
}
/**
 * 一左一右
 */
.zlWL_zl_sb {
  display: flex;
  justify-content: space-between;
}
/**
 * 水平居中
 */
.zlWL_zl_r_jz {
  display: flex;
  justify-content: center;
}
/**
 * 垂直布局
 */
.zlWL_zl_cz {
  display: flex;
  flex-flow: column;
}
/**
 * 居中
 */
.zlWL_zl_jz {
  display: flex;
  align-items: center;
}
.zlWL_zl_f1 {
  flex: 1;
}
/**
 * 填充
 */
.zlWL_zl_f {
  display: flex;
}
</style>

